<template>
	<div>
		<!-- <div class="h_h">
			<el-input style="width: 200px;margin-right: 10px;" class="search_input" placeholder="用户名模糊查找" prefix-icon="el-icon-search" v-model="like"></el-input>
			<el-button class="btu_head" type="primary" @click="search(like)" icon="el-icon-search">搜索</el-button>
		</div> -->
		<vxe-table 
			border 
			ref="xTable" 
			 show-overflow
			:data="tableData"
			:edit-config="{trigger: 'click', mode: 'row'}" 
			>
			
				<vxe-column field="id" title="id"></vxe-column>
				<vxe-column field="userId"  title="用户名">
					<template #default="{ row }">
						<span>{{ formatUser(row.userId) }}</span>
					</template>
				</vxe-column>

			<vxe-column field="roleId" title="角色(点击选择角色)" transfer :edit-render="{}" >
				<template #default="{ row }"  @change="roleChangeEvent">
					<span>{{ formatRole(row.roleId) }}</span>
				</template>
				
				<template #edit="{ row }">
					<vxe-select  transfer v-model="row.roleId" @change="changeFun({row})">
						<vxe-option v-for="item in roleList" :key='item.id' :value="item.id" :label="item.roleName" >
						</vxe-option>
					</vxe-select>
				</template>
			</vxe-column>
		</vxe-table>
		<el-pagination
			layout="total, sizes, prev, pager, next, jumper" 
			:current-page="pageQurey.pageNo"
			:page-size="pageQurey.pageSize" 
			:total="pagination.total"
			:page-sizes="[10,15,20]"
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange">	
		</el-pagination>
	</div>

</template>

<script>
	import {
		getUserRolePages,
		getUserByIdList,
		getRoleByIdList,
		updateUserRole,
		getRoles
	} from "../../../plugins/server.js"
	export default {
		data() {
			return {
				like:"",
				pageQurey: {
					pageNo: 1,
					pageSize: 10,
					sortBy: "",
					isAsc: "",
					userId: 0
				},
				pagination:{},
				tableData: [],
				userList: [],
				userIdList: [],
				roleList: [],
				roleIdList: []
			}
		},
		created() {
			this.getTableData();
		},
		methods: {
			handleCurrentChange(val){
				//更改页数
				this.pageQurey.pageNo=val;
				this.getTableData();
			},
			handleSizeChange(val){
				this.pageQurey.pageSize=val;
				this.getTableData();
			},
			getTableData() {
				getUserRolePages(this.pageQurey).then(res => {
					let userIdList = [];
					let roleIdList = [];

					this.tableData = res.data.data.list
					this.pagination={
						total:res.data.data.total,
						pages:res.data.data.pages
					}
					for (let item of res.data.data.list) {
						userIdList.push(item.userId);
						roleIdList.push(item.roleId)
					}
					this.userIdList = userIdList;
					this.roleIdList = roleIdList;
					this.getUserList();
					this.getRoleList();
				})
			},
			getUserList() {
				getUserByIdList(this.userIdList).then(res => {
					this.userList = res.data.data;
				})
			},
			getRoleList() {
				getRoles().then(res => {
					this.roleList = res.data.data;
				})
				//getRoleByIdList(this.roleIdList)
			},
			formatRole(roleId) {
				const item = this.roleList.find(item => item.id === roleId)
				return item ? item.roleName : roleId
			},
			formatUser(userId) {
				let item = this.userList.find(item => item.id === userId)
				return item ? item.userName : userId
			},
			
			changeFun({row}){
				
				let date=new Date();
				let data={
					id:row.id,
					roleId:row.roleId,
					userId:row.userId,
					updateTime:date
				}
				updateUserRole(data).then(res=>{
					if(res.data.data){
						this.$message({
							message:res.data.message,
							type:'success'
						})
						this.getTableData();
					}else{
						this.$message({
							message:res.data.message,
							type:'error'
						})
					}
				})
			},
			roleChangeEvent({row}){
				const $table = this.$refs.xTable
				              // 获取表格中的全量数据
				const { fullData } = $table.getTableData()
			},
			search(like){
				console.log(like)
			}
		}
	}
</script>

<style>
	.h_h {
		display: flex;
		margin-bottom: 10px;
	}

	.el-form-item {
		margin-left: 40px;
	}
</style>